<!--
任务
1. 搭建基础的bootstrap页面
2. 根据课程所学或官方文档搭建基础的标签页结构
3. 注意页面载入完毕后，调用标签页的js api，打开第二个标签。
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">第一页</a></li>
        <li role="presentation" class="active"><a href="#second" aria-controls="second" role="tab" data-toggle="tab">第二页</a></li>
        <li role="presentation"><a href="#thread" aria-controls="thread" role="tab" data-toggle="tab">第三页</a></li>
        <li role="presentation"><a href="#fourth" aria-controls="fourth" role="tab" data-toggle="tab">第四页</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="first">
            <p>1慕课网是做什么的？<br>互联网技能教育，免费的哦</p>
        </div>
        <div role="tabpanel" class="tab-pane active" id="second">
            <p>2慕课网是做什么的？<br>互联网技能教育，免费的哦</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="thread">
            <p>3慕课网是做什么的？<br>互联网技能教育，免费的哦</p>
        </div>
        <div role="tabpanel" class="tab-pane" id="fourth">
            <p>4慕课网是做什么的？<br>互联网技能教育，免费的哦</p>
        </div>
    </div>

</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>